<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="./static/js/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div>
    <div id="main" style="width: 100%;height:500px;"></div>
  </div>
  <div>
    <div id="sandian" style="width: 100%;height:500px;"></div>
  </div>
  <div style="padding:50px;margin-top:100px;">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">转换系数</h3>
      </div>
      <div class="panel-body">
        <table class="table table-bordered">
          <thead id="thead">
        
          </thead>
          <tbody id="tbody">
        
          </tbody>
        </table>
      </div>
    </div>
    
  </div>
</body>

</html>
<script>
  var data = [];
  var fullnameList = [];
  var numList = [];
  $.ajax({
    url: '/api/getPCs',
    type: 'get',
    dataType: 'json',
    async: false,
    success: function (res) {
      data = res.data;
    }
  })

  for (var i = 0; i < data.length; i++) {
    fullnameList.push(data[i].label);
  }

  for (var i = 0; i < data.length; i++) {
    numList.push(data[i].num);
  }
  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    title: {
      text: 'pac'
    },
    tooltip: {},
    legend: {
      data: []
    },
    xAxis: {
      data: fullnameList,
      axisLabel: {
        interval: 0,
        rotate: 0
      }
    },
    grid: {
      left: '10%',
      bottom: '35%'
    },
    yAxis: {
    },
    series: [{
      name: 'pac',
      type: 'bar',
      data: numList
    }]
  };
  myChart.setOption(option);

  //散点
  var list = [];
  $.ajax({
    url: '/api/getScatter',
    type: 'get',
    dataType: 'json',
    async: false,
    success: function (res) {
      list = res.data;
    }
  });

  var lowColor = '#eac423';
  var midColor = '#8bbd85';
  var highColor = '#3db7ef'

  var lowColors = list.filter(item => {
    return item[2] < 33;
  });

  var midColors = list.filter(item => {
    return item[2] >= 33 && item[2] < 67;
  });

  var highColors = list.filter(item => {
    return item[2] > 67;
  });

  var option1 = {
    title: {
      text: '二维散点图',
      x: 'center',
    },
    xAxis: {
      name: 'PC1'
    },
    yAxis: {
      name: 'PC2'
    },
    series: [{
      color: lowColor,
      symbolSize: 4,
      data: lowColors,
      type: 'scatter'
    }, {
      color: midColor,
      symbolSize: 4,
      data: midColors,
      type: 'scatter'
    }, {
      color: highColor,
      symbolSize: 4,
      data: highColors,
      type: 'scatter'
    }]
  };
  var chart = echarts.init(document.getElementById('sandian'));
  chart.setOption(option1);

  //表格
  var thead = [];
  var tbody = [];
  $.ajax({
    url: '/api/getComponents',
    type: 'get',
    dataType: 'json',
    async: false,
    success: function (res) {
      thead = res.data.header;
      var theadHtml = '<tr>';
      for (var i = 0; i < thead.length; i++) {
        theadHtml += '<th>' + thead[i] + '</th>';
      }
      theadHtml += '</tr>';
      $('#thead').html(theadHtml);
      tbody = res.data.body;
      var tbodyHtml = '';
      for (var i = 0; i < tbody.length; i++) {
        tbodyHtml += '<tr>';
        for (var j = 0; j < tbody[i].length; j++) {
          tbodyHtml += '<td>' + tbody[i][j] + '</td>';
        }
        tbodyHtml += '</tr>';
      }
      $('#tbody').html(tbodyHtml);
    }
  })

</script>